<template>
  <div>
    <el-container class="top-container">
      <el-container class="left-container">
        <el-card class="box-card">
          <div class="card-body">
            <el-image class="user-header-image" fit="cover" :src="customerDetail.headPic"></el-image>
            <div class="user-info-box">
              <div class="user-info-cell">
                <span class="title">微信昵称</span>
                <span class="content" v-text="customerDetail.wechatNick"></span>
              </div>
              <div class="user-info-cell">
                <span class="title">注册时间</span>
                <span class="content" v-text="customerDetail.createTime"></span>
              </div>
              <div class="user-info-cell">
                <span class="title">微信手机号</span>
                <span class="content" v-text="customerDetail.mobile || '-'"></span>
              </div>
              <!-- <div class="user-info-cell">
                <span class="title">钻石结余</span>
                <span class="content" v-text="customerDetail.scort"></span>
                <el-button @click="recharge()" type="text" size="small">充值</el-button>
              </div>
              <div class="user-info-cell">
                <span class="title">上级代理</span>
                <span
                  class="content"
                  v-text="customerDetail.superior ? customerDetail.superior : '-'"
                ></span>
              </div>
              <div class="user-info-cell">
                <span class="title">代理等级</span>
                <span class="content" v-text="customerDetail.grade ? customerDetail.grade : '-'"></span>
                <el-button @click="setDelegete()" type="text" size="small" v-if="showsetAgent">设置代理</el-button>
              </div>-->
            </div>
          </div>
        </el-card>
      </el-container>
      <el-container class="right-container">
        <el-card class="box-card" style="overflow:auto">
          <div class="user-address" v-if="customerAddress.length == 0">
            <div class="address-title">暂无地址</div>
          </div>
          <div v-else>
            <h3 style="margin: 0;color: #666;">收货地址</h3>
            <div
              class="user-address"
              v-for="(item,index) in customerAddress"
              :key="index"
               
            >
              <div class="address-title">{{item.receiptName +"&nbsp;&nbsp;"+ item.receiptMobile}}</div>
              <div
                class="address"
              >{{item.provinceName+"&nbsp;&nbsp;" + item.cityName +"&nbsp;&nbsp;"+ item.areaName+"&nbsp;&nbsp;"+ item.receiptAddress}}</div>
            </div>
          </div>
        </el-card>
      </el-container>
    </el-container>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="订单列表" name="first"></el-tab-pane>
      <div class="table-body">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="orderNum" label="订单编号"></el-table-column>
          <el-table-column prop="title" label="购买商品">
            <template slot-scope="scope">
              <div
                v-for="item in scope.row.orderdetailList"
                :key="item.id"
                style="    background: #f5f5f5;line-height: 32px;margin-bottom:5px;border-radius:4px;padding:0 5px"
              >{{item.title}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="totalPay" label="金额"></el-table-column>
          <!-- <el-table-column prop="damondNum" label="钻石结余"></el-table-column> -->
          <el-table-column prop="status" :formatter="statusFormat" label="订单状态"></el-table-column>
        </el-table>
      </div>
    </el-tabs>

    <el-dialog title="设置代理" :visible.sync="dialogVisible" width="30%">
      <bind-delegete :customerId="customerId" @submit="onSubmit" />
    </el-dialog>
    <el-dialog title="钻石充值" :visible.sync="isBuyIntegral" width="30%" @close="onClose">
      <buy-integral ref="buyRef" @submit="isBuyIntegral = $event;initData()" />
    </el-dialog>
  </div>
</template>

<script>
import BindDelegete from "./BindDelegete";
import BuyIntegral from "../delegete/BuyIntegral";
export default {
  data() {
    return {
      customerId: "",
      customerDetail: {}, //客户详情
      customerAddress: [], //客户地址
      tableData: [],
      dialogVisible: false, //是否显示dialog
      isBuyIntegral: false, //钻石充值 显示dialog
      activeTab: "first",
      showsetAgent: true
    };
  },
  mounted() {
    this.customerId = this.$route.query.id;
    this.initData();
    this.getOrderList();
  },
  methods: {
    onSubmit() {
      this.dialogVisible = false;
      this.showsetAgent = false;
      this.initData();
    },
    initData() {
      this.$service.getCustomerDetail({ id: this.customerId }).then(res => {
        console.log(res.res1.data[0]);
        this.customerDetail = res.res1.data[0] || {};
        if (res.res1.data[0]) {
          if (res.res1.data[0].isAgent == "1") {
            this.showsetAgent = false;
          } else {
            this.showsetAgent = true;
          }
        }
        //console.log(111, this.customerDetail.headPic);
        this.customerAddress = res.res2.data || [];
      });
      // this.$service.getCustomerisAgent(this.customerId).then(res => {
      //   console.log(res);
      //   if (res.data == false) {
      //     this.showsetAgent = false;
      //   } else {
      //     this.showsetAgent = true;
      //   }
      // });
    },
    getOrderList() {
      let param = {
        tbOrder: {
          customerId: this.customerId
        },
        queryRequest: {
          pageSize: 100,
          pageNum: 1
        }
      };
      this.$service.getOrderList(param).then(res => {
        for (let i = 0; i < res.data.rows.length; i++) {
          const element = res.data.rows[i];

          element.totalPay = element.totalPay / 100;
        }
        this.tableData = res.data.rows || [];
      });
    },
    statusFormat(row) {
      //console.log(111, row);
      let status = row.status && Number(row.status);
      let statusText = "-";

      switch (status) {
        case 1:
          statusText = "未付款";
          break;
        case 2:
          statusText = "已付款";
          break;
        case 3:
          statusText = "已发货";
          break;
        case 4:
          statusText = "交易成功";
          break;
        case 5:
          statusText = "交易关闭";
          break;
          case 6:
          statusText = "已评价";
          break;
        case 7:
          statusText = "退货中";
          break;
        case 8:
          statusText = "退货成功";
          break;
        case 9:
          statusText = "退货失败";
          break;
          case 10:
          statusText = "删除订单";
          break;
      }
      return statusText;
    },
    setDelegete() {
      this.dialogVisible = true;
    },
    recharge(scort) {
      this.isBuyIntegral = true;

      this.$nextTick(() => {
        this.$refs.buyRef.initData(
          this.customerDetail.wechatNick,
          this.customerDetail.mobile,
          this.customerId
        );
      });
    },
    onClose() {
      this.$refs.buyRef.resetForm("formRef");
    }
  },
  components: {
    "bind-delegete": BindDelegete,
    "buy-integral": BuyIntegral
  }
};
</script>

<style lang="scss" scoped>
.box-card {
  width: 95%;
  height: 320px;
  .card-body {
    width: 100%;
    display: flex;
    .user-header-image {
      margin-right: 50px;
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
    .user-info-box {
      width: 50%;
      display: flex;
      flex-direction: column;
      .user-info-cell {
        height: 30px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 500;
        .title {
          white-space: nowrap;
          min-width: 100px;
        }
        .content {
          flex: 1;
          color: #909399;
        }
      }
    }
  }
}
.user-address {
  margin: 20px;
  display: flex;
  align-items: flex-start;
  font-size: 14px;
  font-weight: 500;
  .address-title {
    white-space: nowrap;
    margin-right: 20px;
  }
  .address {
    color: #909399;
  }
}
</style>